<ion-header>
  <ion-toolbar>
    <ion-title>用户登录</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 用户名和密码 -->
  <ion-card>
    <!-- iitem -->
    <ion-item>
      <ion-label>用户名:</ion-label>
      <!-- iinput -->
      <ion-input [(ngModel)]="uname" type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>密码:</ion-label>
      <!-- iinput -->
      <ion-input [(ngModel)]="upwd" type="password"></ion-input>
    </ion-item>
  </ion-card>

  <!-- 登录按钮 -->
  <ion-button (click)="doLogin()" expand="block">登录</ion-button>
  
  <!-- 其他方式登录 -->
  <div style="margin: 20px 0;">其他方式登录:</div>
  <ion-button color="danger" size="small">
    <ion-icon name="logo-angular"></ion-icon>
  </ion-button>
  <ion-button color="warning" size="small">
    <ion-icon name="logo-nodejs" style="color:white"></ion-icon>
  </ion-button>
  <ion-button color="success" size="small">
    <ion-icon name="logo-npm"></ion-icon>
  </ion-button>
  <ion-button size="small">
    <ion-icon name="logo-github"></ion-icon>
  </ion-button>
  <ion-button color="secondary" size="small">
    <ion-icon name="logo-twitter"></ion-icon>
  </ion-button>
  <ion-button color="tertiary" size="small">
    <ion-icon name="logo-html5"></ion-icon>
  </ion-button>
</ion-content>
